<template>
  <div>

  <el-dialog
    title="编辑"
    :visible.sync="dialogVisible"
    width="23%">
    <span>
      <el-form :model="form" :rules="rules" ref="form1" label-width="60px">

        <!-- <el-form-item label="学号" prop="stuNo">
             <el-input v-model="form.stuNo" clearable></el-input>
         </el-form-item> -->
         <label-input label="学号" prop="stuNo" :form="form" @ch1="ccc"></label-input>
         <el-form-item label="姓名" prop="name">
             <el-input v-model="form.name" clearable></el-input>
         </el-form-item>
         <el-form-item label="性别" prop="sex">
             <el-input v-model="form.sex" clearable></el-input>
         </el-form-item>
      </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </span>
  </el-dialog>


    <el-row style="margin-top: 0.5rem;">
      <el-col :span="21">
      <el-button-group >
        <el-button type="primary" @click="add()" icon="el-icon-plus"  :size="size">新增</el-button>
        <el-button type="primary" @click="edit()" icon="el-icon-edit" :disabled="!currentRow"  :size="size">修改</el-button>
        <el-button type="primary" @click="del()" icon="el-icon-delete" :disabled="!currentRow"  :size="size">删除</el-button>
        <el-button type="success" @click="refreshbutton()" icon="el-icon-refresh"   :size="size">刷新</el-button>
      </el-button-group>
      </el-col>
      <el-col :span="3">
         <el-input
             placeholder="请输入内容"
             prefix-icon="el-icon-search"
             v-model="queryParams.search" :size="size" clearable @change="searChange">
           </el-input>
      </el-col>
    </el-row>
   <el-row style="margin-top: 0.625rem;">
       <el-table
        border
         ref="singleTable"
         :data="stus"
         v-loading="loading"
         highlight-current-row
         @current-change="handleCurrent"
         style="width: 100%">
         <el-table-column
           type="index">
         </el-table-column>
         <el-table-column
           property="stuNo"
           label="学号">
         </el-table-column>
         <el-table-column
           property="name"
           label="姓名">
         </el-table-column>
         <el-table-column
           property="sex"
           label="性别">
         </el-table-column>
       </el-table>
   </el-row>
   <el-row style="margin-top: 0.625rem;">
     <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="queryParams.page"
           :page-sizes="[3,10, 20, 30, 50]"
           :page-size="queryParams.limit"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total">
         </el-pagination>
   </el-row>
  </div>
</template>

<script>
  import {mapState,mapMutations} from 'vuex';
  import labelInput from '../../components/labelInput.vue';

  export default {
    components:{ labelInput },
    data() {
      return {
        size:"small",
        stus: [],
        form:{
          stuNo:'',
          name:'',
          sex:''
        },
        rules:{
           stuNo: [{ required: true, message: '请输入学号', trigger: 'blur' }],
           name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
           sex: [{ required: true, message: '请输入性别', trigger: 'blur' }],
        },
        currentRow:null,
        queryParams:{
          limit:3,
          page:1,
          sort:'stuNo',
          order:'asc',
          search:''
        },
        total:0,
        dialogVisible:false,
        loading:false
      }
    },
    methods:{
      ...mapMutations(['setParams','logout']),

      ccc(e){
        console.log('触发了',e);
      },

      add(){
        this.form={};
        this.dialogVisible=true;
      },
      edit(){
        this.form=Object.assign({},this.currentRow);
        this.dialogVisible=true;
      },
      del(){
        this.$confirm('是否删除此条数据', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'info'
            }).then(() => {
              this.$ajax.post('delete',this.currentRow).then(res=>{
                var result=res.data;
                if(result.success){
                  this.$notify({
                    title: '提示',
                    message: '数据删除成功',
                    type: 'success',
                    position: 'bottom-right'
                  });
                  this.refreshtable();
                }
              }).catch(err=>{
                this.$message({
                  type: 'error',
                  message: '删除失败'
                });
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
      },
      handleCurrent(row,column,event) {
        this.currentRow = row;
      },
      refreshbutton(){
        this.loading=true;
        this.refreshtable();
      }
      ,
      refreshtable(){
        this.$ajax.post('page',this.queryParams).then(res=>{
               var result=res.data;
               if(result.success){
                 // this.stus=result.data;
                 this.stus=result.data.rows;
                 this.total=result.data.total;
                 this.currentRow=null;
                 setTimeout(() => {
                   this.loading=false;
                 }, 250)
               }
             }).catch(res=>{})
      },
      save(){
        this.$refs.form1.validate(valid=>{
          if(valid){
            this.$ajax.post('save',this.form).then(res=>{
              var result = res.data;
              if(result.success){
                this.dialogVisible=false;
                this.refreshtable();
                this.form={};
                this.$notify({
                  title: '提示',
                  message: '数据保存成功',
                  type: 'success',
                  position: 'bottom-right'
                });
              }
            })
          }
        })
      },
       handleSizeChange(val) {
         this.queryParams.limit=val;
         this.refreshtable();
       },
       handleCurrentChange(val) {
          this.queryParams.page=val;
          this.refreshtable();
       },
       searChange(){
         this.refreshtable();
       }
    },
    mounted() {
      this.refreshtable();
    }
  }
</script>

<style scoped>

  div {}

</style>
